<template>
    <div class="open-switch" :class="[disabled && 'switch-no-click']" @click="changeOpenShare" :style="{background:modelValue?'#1E6FFF':''}">
        <div class="switch-button" :style="{left:!modelValue?'.125rem':'1.25rem'}"></div>
    </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 

import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits(["update:modelValue",'change'])
const props = defineProps({
    modelValue:{
        type:Boolean,
        default:false
    },
    disabled:{
        type:Boolean,
        default:false
    }
})
//const { } = toRefs(props);
function changeOpenShare(){
    if(props.disabled) return
    emit("update:modelValue",!props.modelValue)
    emit('change',!props.modelValue)
}
</script>
<style lang="scss" scoped>
.open-switch{
    width: 2.625rem;
    height: 1.5rem;
    background: #E3E6E8;
    border-radius: .375rem;
    display: flex;
    align-items: center;
    padding: .125rem;
    position: relative;
    transition: all 0.5s;
    cursor: pointer;
    .switch-button{
        position: absolute;
        width: 1.25rem;
        height: 1.25rem;
        background: #FFFFFF;
        transition: all 0.5s;
        border-radius: .375rem;
    }
}
.switch-no-click{
    cursor: not-allowed;
}
</style>